<template>
	<view>
		<view class="post">
			<view class="postBox">
				<view class="detail">
					<view v-if="postDetail.length!==0">
						<view class="detailBox" v-for="(row,index) in postDetail" :key="index">
							<view class="boxTop">
								<image :src="row.user.avatar" mode="" class="head"></image>
								<view class="right">
									<p class="name">
										{{row.user.userName}}
									</p>
									<p class="p2">
										<text class="text1">{{renderTimeYMDHMS(row.postTime)}}</text>
									</p>
								</view>
							</view>
							<view class="postCont">{{row.postCont}}</view>
							<view class="postImg" v-if="row.postImg!==null">
								<image :src="s" mode="" v-for="(s,x) in row.postImg" :key="x"
									@click="preview(row.postImg,x)"></image>
							</view>

							<span>
								<text class="tag" v-for="(s,x) in row.postTag" :key="x">
									{{s}}
								</text>
								<view class="line">
									<view class="groupSource">
										<image class="groupSourcePic" src='../../../static/post/source.png'>
										</image>
										<view class="groupSourceName">{{row.group.groupName}}小组</view>
									</view>
									<view class="likeAndCmt">
										<view class="postLike">
											<image class="postLikePic"
												src="/static/component/likeorcmt/likefalseicon.png">
											</image>
											<view class="postLikeNum">{{row.postLikeNum}}</view>
										</view>
										<view class="postCmt">
											<image class="postCmtPic" src="/static/component/likeorcmt/resoicon.png">
											</image>
											<view class="postCmtNum">{{row.postCmtNum}}</view>
										</view>
									</view>
								</view>
							</span>

						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bg-dark"></view>
		<!-- 评价 -->
		<view class="eva-section">
			<view class="e-header">
				<text class="tit">评论</text>
				<text class="tit-num">({{cmt.length}})</text>
			</view>
			<view class="eva-box" v-for="(row, index) in cmt" :key="index">
				<image class="portrait" :src="row.user.avatar"></image>
				<view class="right">
					<text class="name">{{row.user.userName}}</text>
					<text class="time">{{renderTimeYMDHMS(row.postCmtTime)}}</text>
					<text class="con">{{row.postCmtCont}}</text>
					<view class="bot">
						<view class="reso_like">
							<image class="reso_like_pic" src="/static/component/likeorcmt/likefalseicon.png"></image>
							<view class="reso_like_num">{{row.postCmtLikeNum}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="input-box">
			<view class="textbox">
				<view class="text-mode">
					<view class="box">
						<textarea auto-height="true" v-model="textMsg" id="textMsg" />
					</view>
				</view>
			</view>
			<label for="textMsg">
				<view class="send" @tap="sendText">
					<view class="btn">
						发送
					</view>
				</view>
			</label>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad() {
			this.getPostDetail(15);
			this.getPostCmt(1);
		},
		data() {
			return {
				postId: 2,
				textMsg: '',
				postDetail: [],
				cmt: [],
			}
		},
		methods: {
			renderTimeYMDHMS(date) {
				var dateee = new Date(date).toJSON();
				return new Date(+new Date(dateee) + 8 * 3600 * 1000)
					.toISOString()
					.replace(/T/g, ' ')
					.replace(/\.[\d]{3}Z/, '')
			},
			getPostDetail(postId) {
				uni.request({
					url: "http://ronin.fun:8888/post/detail",
					data: {
						postId: postId,
					},
					success: (res) => {
						this.postDetail.push(res.data.data);
						console.log(this.postDetail);
					}
				})
			},
			getPostCmt(postId) {
				uni.request({
					url: "http://ronin.fun:8888/post/cmt/list",
					data: {
						postId: postId,
					},
					success: (res) => {
						this.cmt = res.data.data;
						console.log(this.cmt);
					}
				})
			},
			sendText() {
				console.log(this.textMsg);
				this.postCmt(this.cmtId, "aiqiu", this.textMsg);
			},
			postCmt(userId, postId, postCmtCont) {
				uni.showLoading({
					title: "加载中..."
				})
				uni.request({
					url: "http://ronin.fun:8888/post/cmt/create",
					method: 'POST',
					header: {
						'content-type': "application/x-www-form-urlencoded"
					},
					data: {
						userId: userId,
						postId: postId,
						postCmtCont: postCmtCont,
					},
					success: (res) => {
						uni.hideLoading()
						//成功
						if (res.data.code === 200) {
							setTimeout(() => {
								// 服务端响应的 message 提示
								uni.showToast({
									title: "发送成功",
									icon: "none",
									position: 'bottom',
								})
								//延时关闭  加载中的 loading框
								uni.hideLoading()
							}, 1000)
							this.getPostCmt(postId)
						} else {
							//不成功
							uni.hideLoading()
							// 服务端响应的 message 提示
							setTimeout(() => {
								uni.showToast({
									title: "发送失败",
									icon: "none",
									position: 'bottom',
								})
								//延时关闭  加载中的 loading框
								uni.hideLoading()
							}, 1000)
						}
						this.textMsg = ''
					},
					fail: (res) => {
						// 服务端响应的 message 提示
						setTimeout(() => {
							uni.showToast({
								title: "发送失败",
								icon: "none",
								position: 'bottom',
							})
							//延时关闭  加载中的 loading框
							uni.hideLoading()
						}, 1000)
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.post {
		padding: 0 4%;
		margin-bottom: 30upx;

		.postBox {
			.detail {
				background-color: #ffffff;
				overflow: hidden;

				.detailBox {
					overflow: hidden;
					margin-top: 20upx;
					padding-bottom: 20upx;
					overflow: hidden;
					border-bottom: 1upx solid #f2f2f2;

					&:last-child {
						border-bottom: none;
						padding-bottom: 10upx;
					}

					.boxTop {
						display: flex;

						.head {
							height: 80upx;
							max-width: 80upx;
							min-width: 80upx;
							flex: 1;
							border-radius: 50%;
							float: left;
						}

						.right {
							flex: 1;
							margin-left: 20upx;
							position: relative;

							.name {
								font-size: 26upx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								color: rgba(0, 0, 0, 1);
							}

							.p2 {
								margin-top: 20upx;
								font-size: 24upx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								color: rgba(156, 156, 156, 1);

								.text2 {
									margin-left: 50upx;
								}
							}

							.p3 {
								height: 35upx;
								position: absolute;
								right: 0;
								width: 200upx;
								top: 8upx;

								image {
									width: 35upx;
									height: 35upx;
									float: left;
									margin-left: 5upx;
								}
							}
						}
					}

					.postCont {
						font-size: 28upx;
						margin-top: 20upx;
						font-family: Source Han Sans CN;
						font-weight: 500;
						color: rgba(0, 0, 0, 1);
						line-height: 50upx;
					}

					.postImg {
						display: flex;
						flex-wrap: wrap;
						align-items: flex-start;
						align-content: flex-start;
						justify-content: space-between;
						margin-top: 20upx;

						&::after {
							content: '';
							max-width: 29vw;
							min-width: 29vw;
						}

						image {
							max-width: 29vw;
							min-width: 29vw;
							height: 29vw;
							border-radius: 10upx;
							margin-bottom: 20upx;
						}
					}

					.line {
						display: inline-block;
						.likeAndCmt {
							.postLike {
								display: inline-block;
								margin-left: 470upx;
								width: 80upx;
								height: 50upx;

								.postLikePic {
									vertical-align: bottom;
									width: 50upx;
									height: 50upx;
								}

								.postLikeNum {
									display: inline-block;
									font-size: 30upx;
									margin-left: 10upx;
									color: #555555;
								}
							}

							.postCmt {
								display: inline-block;
								margin-left: 50upx;

								.postCmtPic {
									vertical-align: bottom;
									width: 50upx;
									height: 50upx;
								}

								.postCmtNum {
									display: inline-block;
									margin-left: 10upx;
									color: #555555;
								}
							}
						}



						.groupSource {
							display: block;
							margin-left: 0upx;
							width: 250upx;
							height: 50upx;

							.groupSourcePic {
								vertical-align: bottom;
								width: 50upx;
								height: 50upx;
								top: 10rpx;
							}

							.groupSourceName {
								padding-top: 20rpx;
								display: inline-block;
								font-size: 30rpx;
								padding-left: 10rpx;
								color: #555555;
							}
						}
					}
					.tag {
						padding-left: 5rpx;
						padding-right: 5rpx;
					
						// padding-top: 1rpx;
						// padding-bottom: 1rpx;
						color: #ffffff;
						background-color: #ffdf25;
						border: 1.5px solid #dcdcdc;
					}
				}
			}
		}

	}

	.bg-dark {
		background-color: #f2f2f2;
		height: 50upx;
	}

	/* 评价 */
	.eva-section {
		display: flex;
		flex-direction: column;
		padding: 20upx 30upx;
		background: #fff;
		margin-bottom: 100upx;

		.e-header {
			display: flex;
			align-items: center;
			height: 70upx;
			font-size: $font-sm + 2upx;
			color: $font-color-light;

			.tit {
				font-size: $font-base + 5upx;
				color: $font-color-dark;
				margin-right: 4upx;
			}

			.tit-num {
				font-size: $font-base;
				margin-left: 10upx;
			}

			.tip {
				flex: 1;
				text-align: right;
			}

			.icon-you {
				margin-left: 10upx;
			}
		}
	}

	.eva-box {
		display: flex;
		padding: 20upx 0;

		.portrait {
			flex-shrink: 0;
			width: 80upx;
			height: 80upx;
			border-radius: 100px;
		}

		.right {
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: $font-base;
			color: $font-color-base;
			padding-left: 26upx;

			.con {
				margin-top: 10upx;
				font-size: $font-base;
				color: $font-color-dark;
				padding: 20upx 0;
			}

			.bot {
				display: flex;
				justify-content: space-between;
				font-size: $font-sm;
				color: $font-color-light;
				border-bottom: 1upx solid #f2f2f2;
			}

			.time {
				margin-top: 10upx;
			}

			.reso_like {
				display: inline-block;
				margin-left: 470upx;
				width: 80upx;
				height: 50upx;
				margin-bottom: 18upx;

				.reso_like_pic {
					vertical-align: bottom;
					width: 50upx;
					height: 50upx;
				}

				.reso_like_num {
					display: inline-block;
					font-size: 30upx;
					margin-left: 10upx;
					color: #555555;
				}
			}
		}
	}

	.input-box {
		width: 100%;
		min-height: 100upx;
		padding: 0 1%;
		background-color: #f2f2f2;
		display: flex;
		position: fixed;
		z-index: 20;
		bottom: 0;

		.send {
			//H5发送按钮左边距
			/* #ifdef H5 */
			margin-left: 20upx;
			/* #endif */
			flex-shrink: 0;
			width: 100upx;
			height: 100upx;
			display: flex;
			align-items: center;

			.btn {
				width: 90upx;
				height: 56upx;
				display: flex;
				justify-content: center;
				align-items: center;
				background: #B0E3FF;
				color: #fff;
				border-radius: 6upx;
				font-size: 24upx;
			}
		}

		.textbox {
			width: 100%;
			min-height: 70upx;
			margin-top: 15upx;

			.text-mode {
				width: 100%;
				min-height: 70upx;
				display: flex;
				background-color: #fff;
				border-radius: 40upx;

				.box {
					width: 100%;
					padding-left: 30upx;
					min-height: 70upx;
					display: flex;
					align-items: center;

					textarea {
						width: 100%;
					}
				}

				.em {
					flex-shrink: 0;
					width: 80upx;
					height: 70upx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
	}
</style>
